<template>
<div>
  <index-import-m-j ref="importMJ"></index-import-m-j>
  <div class="opt-area-02">
    <div class="right-con">
      <div class="input-frame" style="width: 160px">
        <Input v-model="params.name" placeholder="请输入姓名" style="width: 160px" />
      </div>
      <div class="input-frame" style="width: 160px">
        <Input v-model="params.card_no" placeholder="请输入身份证号" style="width: 160px" />
      </div>
      <div class="input-frame" style="width: 200px">
        <DatePicker v-model="params.time" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="请选择时间" style="width: 200px"></DatePicker>
      </div>
      <div class="input-frame" style="width: 160px">
        <Select v-model="params.repetition">
          <Option :value="'0'" >重复</Option>
          <Option :value="'1'" >不重复</Option>
        </Select>
      </div>
      <Button type="info" size="small" style="margin-top: 5px;margin-right: 5px" @click="init()">搜索</Button>
      <Button type="success" size="small" style="margin-top: 5px;margin-right: 5px" @click="importInfo">导入密接人员信息</Button>
      <Button type="error" size="small" style="margin-top: 5px;margin-right: 5px"><a :href="excelTemplate1">下载模板</a></Button>
      <Button type="primary" size="small" style="margin-top: 5px;margin-right: 5px" @click="exportData()"><Icon type="ios-download-outline"></Icon>导出不重复数据</Button>
    </div>
  </div>
  <div>
    <template>
      <Table :columns="columns" :data="data" :loading="tableLoading" ref="table">
        <template slot-scope="{ row }" slot="repetition">
          <span v-if="row.repetition == '0'">重复</span>
          <span v-else>不重复</span>
        </template>
      </Table>
    </template>
    <Row type="flex" justify="end" style="margin-top: 10px">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
            show-total @on-change="pageAction"/>
    </Row>
  </div>
</div>
</template>

<script>
import IndexImportMJ from './components/index-import-MJ'
import { findMjbcfList, findMjList } from '../../../api/yi-qing-fang-kong'
export default {
  name: 'index',
  components: { IndexImportMJ },
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name',
          fixed: 'left',
          align: 'center',
          minWidth: 100
        },
        {
          title: '身份证号',
          key: 'card_no',
          fixed: 'left',
          align: 'center',
          minWidth: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          minWidth: 150
        },
        {
          title: '居住地区',
          key: 'area',
          align: 'center',
          minWidth: 100
        },
        {
          title: '详细地址',
          key: 'address',
          minWidth: 200,
          align: 'center'
        },
        {
          title: '数据源',
          key: 'datasource',
          align: 'center',
          minWidth: 150
        },
        {
          title: '接触关系',
          key: 'contact',
          align: 'center',
          minWidth: 150
        },
        {
          title: '隔离措施（XX区居家隔离；XX区集中隔离；XX区居住未隔离；XX医院住院观察；离沈）',
          key: 'measure',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '现居住地（隔离宾馆要填写至房间号、现住址要精确）',
          key: 'addressNow',
          minWidth: 400,
          align: 'center'
        },
        {
          title: '备注（其他需说明情况）',
          key: 'remark',
          minWidth: 200,
          align: 'center'
        },
        {
          title: '录入时间',
          key: 'create_time',
          minWidth: 200
        },
        {
          title: '是否重复',
          slot: 'repetition',
          align: 'center',
          minWidth: 100
        }
      ],
      data: [],
      params: {
        name: '',
        card_no: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        time: ['', ''],
        begin_time: '',
        end_time: '',
        repetition: ''
      },
      excelTemplate1: 'http://imgdl.tripln.top/webhdfs/v1/importTemplate/密切接触人员信息导入_8281611230.xlsx?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
      tableLoading: false,
      dataExport: [],
      columnsExport: [
        {
          title: '姓名',
          key: 'name',
          fixed: 'left',
          align: 'center',
          minWidth: 100
        },
        {
          title: '身份证号',
          key: 'card_no',
          fixed: 'left',
          align: 'center',
          minWidth: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          minWidth: 150
        },
        {
          title: '居住地区',
          key: 'area',
          align: 'center',
          minWidth: 100
        },
        {
          title: '详细地址',
          key: 'address',
          minWidth: 200,
          align: 'center'
        },
        {
          title: '数据源',
          key: 'datasource',
          align: 'center',
          minWidth: 150
        },
        {
          title: '接触关系',
          key: 'contact',
          align: 'center',
          minWidth: 150
        },
        {
          title: '隔离措施（XX区居家隔离；XX区集中隔离；XX区居住未隔离；XX医院住院观察；离沈）',
          key: 'measure',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '现居住地（隔离宾馆要填写至房间号、现住址要精确）',
          key: 'addressNow',
          minWidth: 400,
          align: 'center'
        },
        {
          title: '备注（其他需说明情况）',
          key: 'remark',
          minWidth: 200,
          align: 'center'
        },
        {
          title: '录入时间',
          key: 'create_time',
          minWidth: 200
        }
      ]
    }
  },
  methods: {
    // 初始化
    init () {
      let data = this.params
      this.params.begin_time = ''
      this.params.end_time = ''
      if (data.time[0] !== '') {
        this.params.begin_time = this.disposeTime(data.time[0])
      }
      if (data.time[1] !== '') {
        this.params.end_time = this.disposeTime(data.time[1])
      }
      this.tableLoading = true
      findMjList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.data = ret.data.data.results
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    importInfo () {
      this.$refs.importMJ.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    disposeTime (e) {
      var y = e.getFullYear()
      var m = e.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = e.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    exportData () {
      findMjbcfList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataExport = ret.data.data
          this.$refs.table.exportCsv({
            filename: '密切接触人员数据',
            columns: this.columnsExport,
            data: this.dataExport
          })
        } else {
          this.$Notice.error({ title: '导出失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }
</style>
